<template>
  <div class="mine">
    <p class="mineTitle">难于上青天{{}}</p>
    <div class="mineInfo">
      <div class="info_img">
        <img src="" alt="" />
      </div>
      <div class="info_info">
        <div class="info_list">
          <ul>
            <li v-for="(item, index) in infoList" :key="index">
              <span>{{ item }}</span>
            </li>
          </ul>
        </div>
        <p class="info_p">完善个人信息</p>
      </div>
    </div>
    <div class="mineTicket">
      <div class="ticket">
        <img src="../../assets/img/mine/17.webp" alt="" />
        <span>优惠券：{{}}</span>
      </div>
      <div class="petFood">
        <img src="../../assets/img/mine/5.webp" alt="" />
        <span>宠粮：{{}}</span>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="我的宠物" value="查看所有宠物&nbsp;&nbsp;>" />
    </van-cell-group>
    <div class="minePet">
      <div class="pet_img">
        <img src="" alt="" />
      </div>
      <p class="addPet">添加宠物</p>
    </div>
    <div class="mineOrder">
      <van-cell-group>
        <van-cell title="我的订单" value="查看全部&nbsp;&nbsp;>" />
      </van-cell-group>
      <van-grid :column-num="5">
        <van-grid-item icon="credit-pay" text="待付款" />
        <van-grid-item icon="tosend" text="待发货" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="other-pay" text="待评价" />
        <van-grid-item icon="after-sale" text="退款售后" />
      </van-grid>
    </div>
    <div class="mineRelease">
      <van-grid :column-num="4">
        <van-grid-item>
          <img src="../../assets/img/mine/11.webp" />
          <p>我的发布</p>
        </van-grid-item>
        <van-grid-item>
          <img src="../../assets/img/mine/12.webp" />
          <p>我的收藏</p>
        </van-grid-item>
        <van-grid-item>
          <img src="../../assets/img/mine/13.webp" />
          <p>我的试用</p>
        </van-grid-item>
        <van-grid-item>
          <img src="../../assets/img/mine/14.webp" />
          <p>养护记录</p>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="other">
      <van-grid :column-num="4">
        <van-grid-item>
          <img src="../../assets/img/mine/15.webp" />
          <p>品种百科</p>
        </van-grid-item>
        <van-grid-item>
          <img src="../../assets/img/mine/16.webp" />
          <p>能不能吃</p>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="mine_footer">
      <p>宠&nbsp;&nbsp;明</p>
    </div>
  </div>
</template>

<script>
// import { ref } from "Vue";
export default {
  data() {
    return {
      infoList: ["关注", "粉丝", "被赞"],
    };
  },
};
</script>
<style lang="less" scoped>
.mine {
  width: 100%;
  .mineTitle {
    display: block;
    width: 100%;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    text-align: center;
    background-color: #fff;
  }
  .mineInfo {
    width: 100%;
    height: 121px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    border-top: 10px solid rgb(249, 249, 249);
    background-color: #fff;
    .info_img {
      width: 76px;
      height: 76px;
      border: 1px solid #000;
    }
    ul {
      width: 220px;
      height: 48px;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
      li {
        font-size: 12px;
        color: #5d5d5d;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
      }
    }
    .info_p {
      font-size: 13px;
      text-align: center;
      line-height: 28px;
      display: block;
      width: 220px;
      height: 28px;
      background-color: #f9fbfa;
    }
  }
  .mineTicket {
    width: 365px;
    height: 45px;
    border-top: 1px solid #aaaaaa;
    border-right: 2px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
    border-radius: 5px;
    background-color: #fff;
    margin: 0 auto;
    font-size: 13px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    div {
      width: 100px;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
    }
    img {
      transform: scale(0.5);
    }
  }
  .minePet {
    width: 100%;
    height: 195px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    .pet_img {
      width: 110px;
      height: 110px;
      background-color: skyblue;
    }
    .addPet {
      width: 100px;
      height: 35px;
      background-color: #ffc571;
      border-radius: 5px;
      font-size: 15px;
      text-align: center;
      line-height: 35px;
    }
  }
  .mineOrder {
    width: 360px;
    height: 120px;
    border-radius: 5px;
    margin: 10px auto;
    border: 1px solid #aaaaaa;
    overflow: hidden;
    .van-cell {
      padding: 5px;
    }
  }
  .mineRelease {
    width: 360px;
    height: 90px;
    margin: 10px auto;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    overflow: hidden;
    .van-grid-item__content {
      img {
        transform: scale(0.5);
        margin-top: -10px;
      }
      p {
        font-size: 14px;
      }
    }
  }
  .other {
    width: 360px;
    height: 90px;
    border-radius: 5px;
    overflow: hidden;
    margin: 10px auto;
    border: 1px solid #aaaaaa;
    background-color: #fff;
    .van-grid-item__content {
      img {
        transform: scale(0.5);
        margin-top: -10px;
      }
      p {
        font-size: 14px;
      }
    }
  }
  .mine_footer {
    width: 100%;
    height: 120px;
    overflow: hidden;
    p {
      font-size: 18px;
      text-align: center;
      line-height: 80px;
      color: #aaaaaa;
    }
  }
}
</style>
